<template>
  <div class="common-details">
    <customDetailsTopbar title="碳排放数据管理" flag @back="back" />
    <div id="customScroolBox" class="px-1 d-scroll" style="position: relative;">
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 ref="radioTagRef" class="mb-1 w-100" :list="tagList" :check-value="checkedTag" is-scroll @change="tagChange" />
      </div>
      <customSearch v-show="checkedTag === '数据展示'" ref="customSearch" placeholder="请输入企业名称" title="数据展示列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <template v-if="checkedTag === '报告管理'">
        <div class="pos1">
          <i class="iconfont mr-1" @click="openSuperSearch">&#xe6aa;</i>
        </div>
      </template>
      <div v-show="checkedTag === '数据分析'" class="common_list">
        <dataAnalysis v-if="checkedTag === '数据分析'" />
      </div>
      <div v-show="checkedTag !== '数据分析'">
        <div v-if="tableList.length>0" class="common_list">
          <div v-for="(item, index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  <span v-if="checkedTag === '数据展示'">{{ item.companyName }}</span>
                  <span v-else>{{ item.reportName }}</span>
                </div>
                <ul class="des-list">
                  <li v-for="(des, ind) in desList" :key="ind" class="des">
                    <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                    <div class="label">{{ des.label }}：</div>
                    <div class="value">{{ item[des.value] || '/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
      </div>
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="checkedTag === '数据展示'">
            <customPopCheckbox ref="fixedRef" :list="selectOptionAll['行业类别-fixed']" :check-value.sync="form.industryTypeCode" title="行业类别" />
            <customPopCheckbox :list="selectOptionAll['环保履职评价-集团分级评价等级']" :check-value.sync="form.estimationScale" title="集团分级评价等级" />
            <custom-timer type="year" title="所属年份" :is-interval="false" :picker-title="'请选择所属年份'" :date-value="form.year" @update:dateValue="getTime" />
          </template>
          <template v-else-if="checkedTag === '报告管理'">
            <custom-timer type="year" title="年份" :is-interval="false" :picker-title="'请选择所属年份'" :date-value.sync="form.years" />
            <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="报告上传时间" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import dataAnalysis from './components/dataAnalysis'
import { dataList, tpfReportManageList } from '@/api/carbon'

export default {
  components: { dataAnalysis },
  mixins: [commonList],
  data() {
    return {
      current: '',
      total: 0,
      pages: 1,
      typeList: [
        { label: '汽车制造业', value: '汽车制造业' },
        { label: '建筑业', value: '建筑业' },
        { label: '电力、热力', value: '电力、热力' },
        { label: '采矿业', value: '采矿业' },
        { label: '交通运输业', value: '交通运输业' }
      ],
      form: {
        pageNum: 1,
        pageSize: 10,
        quotasStartTime: '',
        quotasEndTime: '',
        commpanyName: '',
        year: `${Number(new Date().getFullYear())}`, // 所属年份
        startTime: '',
        endTime: '',
        companyIds: '-1',
        industryTypeCode: ''
      },
      tagList: [
        { label: '数据展示', value: '数据展示' },
        { label: '数据分析', value: '数据分析' }
        // { label: '报告管理', value: '报告管理' }
      ],
      checkedTag: '数据展示',
      desListMap: {
        数据展示: [
          // { label: '企业类别', value: 'enterpriseType', icon: '&#xe790;' },
          { label: '行政区划', value: 'address', icon: '&#xe87e;' },
          { label: '行业类别', value: 'industry', icon: '&#xe634;' },
          { label: '集团分级评价等级', value: 'estimationScale', icon: '&#xe6f7;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '碳排放量（万吨二氧化碳当量）', value: 'dischargeValue', icon: '&#xea34;' }
        ],
        报告管理: [
          { label: '企业名称', value: 'companyName', icon: '&#xe790;' },
          { label: '年份', value: 'year', icon: '&#xe8d5;' },
          { label: '行业类别', value: 'industry', icon: '&#xe634;' },
          { label: '上传时间', value: 'reportTime', icon: '&#xe685;' },
          { label: '编制时间', value: 'compileTime', icon: '&#xe617;' }
        ]
      },
      desList: [],
      tableList: []
    }
  },
  mounted() {
    const { current, tag } = this.$route.query
    this.current = current
    this.desList = this.desListMap[this.checkedTag]
    if (tag) {
      const info = {
        item: {
          label: tag,
          value: tag
        }
      }
      // this.tagChange(info)
      const _index = this.findIndexByLabel(this.tagList, tag)
      this.$refs.radioTagRef.changeTags(info.item, _index)
    } else {
      this.dataList()
    }
  },
  methods: {
    findIndexByLabel(tagList, label) {
      for (let i = 0; i < tagList.length; i++) {
        if (tagList[i].label === label) {
          return i
        }
      }
      return -1
    },
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 数据展示
    async dataList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      // if (this.form.industryTypeCode === '1,2,3,4,5') {
      //   this.form.industryTypeCode = ''
      // }
      const { status, data } = await dataList(this.form)

      if (status === 0 && data) {
        this.pages = data.pages
        this.total = data.total
        this.tableList = flag ? this.tableList.concat(data.list) : data.list
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    // 报告管理
    async tpfReportManageList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await tpfReportManageList({
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        years: this.form.years,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        companyName: this.form.companyName
      })
      if (status === 0 && data) {
        this.pages = data.pages
        this.total = data.total
        this.tableList = flag ? this.tableList.concat(data.list) : data.list
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    getList(flag) {
      if (this.checkedTag === '数据展示') {
        this.dataList(flag)
      } else if (this.checkedTag === '报告管理') {
        this.tpfReportManageList(flag)
      }
    },
    tagChange(val) {
      this.checkedTag = val.item.value
      this.desList = this.desListMap[this.checkedTag]
      this.reset()
      this.tableList = []
      if (this.checkedTag === '数据展示') {
        this.dataList()
      } else if (this.checkedTag === '报告管理') {
        this.tpfReportManageList()
      }
    },
    reset() {
      Object.keys(this.form).forEach((v) => {
        this.form[v] = ''
      })
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.form.companyIds = -1
      if (this.form.year === '') {
        this.form.year = `${Number(new Date().getFullYear())}`
      }
      // this.form.year = ''
      // this.form.startTime = ''
      // this.form.endTime = ''
      // this.form.companyName = ''
      // this.tableList = []
    },
    getTime(val) {
      this.form.year = val
    },
    getStart(val) {
      this.form.startTime = val
    },
    getEnd(val) {
      this.form.endTime = val
    },
    handleSearch(val) {
      // this.reset()
      this.form.commpanyName = val
      this.getList()
    },
    handlePages(val) {
      this.form.pageNum = val
      this.getList(true)
    },
    resetSuperSearch() {
      this.reset()
      // this.superSearch = false
      // this.getList()
    },
    handleSuperSearch() {
      this.form.pageNum = 1
      this.tableList = []
      this.superSearch = false
      // if (this.form['industryTypeCode'] === this.selectOptionAll['行业类别-fixed'].map(p => p.value).join(',')) {
      //   this.form['industryTypeCode'] = ''
      //   this.$refs.fixedRef.checkAll()
      // }
      this.getList()
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/emissionDataDetail',
        query: { current: this.current, tag: this.checkedTag, ...item }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content {
  .des-list {
    display: flex;
    flex-wrap: wrap;
    .des {
      width: 100%;
    }
  }
}
.pos1{
  position: absolute;
  right: 0;
  top: 0.15rem;
}
.pos1 .iconfont {
  font-size: 0.53333rem;
  color: #fff;
}
</style>
